<template>
  <div class="transfer-container">
    <!-- 单据头部：日期 + 编号 -->
    <div class="header-section">
      <el-row :gutter="20">
        <!-- 单据日期 -->
        <el-col :span="8">
          <el-form-item label="单据日期" label-width="80px">
            <el-date-picker
              v-model="form.date"
              type="date"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <!-- 单据编号 -->
        <el-col :span="8" :offset="8">
          <div class="sn-container">
            <span>单据编号：</span>
            <span class="sn-text">{{ form.sn }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 转账表格：支持添加/删除行 + 下拉选择 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      ref="transferTable"
      :row-class-name="handleRowClassName"
    >
      <!-- 操作列：添加/删除行 -->
      <el-table-column label="操作" width="60">
        <template #default="scope">
          <div class="cell-ops flex flex-col items-center">
            <!-- 添加行（下方插入） -->
            <el-icon
              class="add-icon"
              @click="handleAddRow(scope.$index)"
              style="cursor: pointer; color: #409eff"
            >
              <Plus />
            </el-icon>
            <!-- 删除行 -->
            <el-icon
              class="del-icon"
              @click="handleRemoveRow(scope.$index)"
              style="cursor: pointer; color: #f56c6c"
            >
              <Delete />
            </el-icon>
          </div>
        </template>
      </el-table-column>

      <!-- 序号列 -->
      <el-table-column label="#" type="index" width="40" />
      <!-- 转出账户（下拉选择） -->
      <el-table-column label="*转出账户" prop="fromAccount" min-width="120">
        <template #default="scope">
          <el-select
            v-model="scope.row.fromAccount"
            :options="accountOptions"
            placeholder="请选择转出账户"
            style="width: 100%"
          />
        </template>
      </el-table-column>
      <!-- 转入账户（下拉选择） -->
      <el-table-column label="*转入账户" prop="toAccount" min-width="120">
        <template #default="scope">
          <el-select
            v-model="scope.row.toAccount"
            :options="accountOptions"
            placeholder="请选择转入账户"
            style="width: 100%"
          />
        </template>
      </el-table-column>
      <!-- 金额（必填，≥0.01） -->
      <el-table-column
        label="*金额"
        prop="amount"
        align="right"
        min-width="100"
      >
        <template #default="scope">
          <el-input v-model="scope.row.amount" placeholder="金额" />
        </template>
      </el-table-column>
      <!-- 结算方式（下拉选择） -->
      <el-table-column label="结算方式" prop="method" min-width="120">
        <template #default="scope">
          <el-select
            v-model="scope.row.method"
            :options="methodOptions"
            placeholder="选择结算方式"
            style="width: 100%"
          />
        </template>
      </el-table-column>
      <!-- 结算号 -->
      <el-table-column label="结算号" prop="sn" min-width="120">
        <template #default="scope">
          <el-input v-model="scope.row.sn" placeholder="结算号" />
        </template>
      </el-table-column>
      <!-- 备注 -->
      <el-table-column label="备注" prop="remark" min-width="150">
        <template #default="scope">
          <el-input v-model="scope.row.remark" placeholder="备注" />
        </template>
      </el-table-column>
    </el-table>

    <!-- 底部备注框 -->
    <div class="remark-section">
      <el-form-item label="备注" label-width="80px">
        <el-input
          v-model="form.remark"
          type="textarea"
          :rows="3"
          placeholder="暂无备注信息"
          style="width: 100%"
        />
      </el-form-item>
    </div>

    <!-- 操作按钮：保存、保存并新增、审核等 -->
    <div class="button-section flex justify-end gap-2">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button type="success" @click="handleSaveAndNew">保存并新增</el-button>
      <el-button type="info" @click="handleApprove">审核</el-button>
      <el-button type="text" @click="handleHistory">历史单据</el-button>
      <el-button type="text" @click="handleLog">操作日志</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Plus, Delete } from "@element-plus/icons-vue"; // 导入图标

// ====================== 静态数据定义 ======================
// 账户选项（可扩展为接口获取）
const accountOptions = [
  { value: "1001", label: "1001 现金" },
  { value: "1002", label: "1002 银行存款" },
  { value: "1003", label: "1003 微信支付" },
  { value: "999999", label: "999999 支付宝" },
];

// 结算方式选项（可扩展为接口获取）
const methodOptions = [
  { value: "", label: "(空)" },
  { value: "credit_card", label: "信用卡" },
  { value: "check", label: "支票" },
  { value: "money_order", label: "汇票" },
  { value: "cash", label: "现金" },
  { value: "bank_transfer", label: "银行转账" },
];

// ====================== 响应式数据 ======================
// 表单核心数据
const form = reactive({
  date: new Date().toISOString().split("T")[0], // 默认当前日期
  sn: generateSN(), // 自动生成单据编号
  remark: "", // 底部备注
});

// 表格数据（至少1行）
const tableData = ref([
  {
    fromAccount: "", // 关联 accountOptions 的 value
    toAccount: "", // 关联 accountOptions 的 value
    amount: 0.0, // 金额≥0.01
    method: "", // 关联 methodOptions 的 value
    sn: "", // 结算号
    remark: "", // 行内备注
  },
]);

// ====================== 工具函数 ======================
/**
 * 生成单据编号（规则：ZJZZ + 日期 + 四位序号）
 * 示例：ZJZZ202506260001
 */
function generateSN() {
  const date = new Date();
  const prefix = "ZJZZ";
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const seq = "0001"; // 实际项目建议从服务端获取唯一序号
  return `${prefix}${year}${month}${day}${seq}`;
}

// ====================== 表格操作 ======================
/**
 * 添加行（在当前行下方插入新行）
 * @param {number} index - 当前行索引
 */
const handleAddRow = (index) => {
  tableData.value.splice(index + 1, 0, {
    fromAccount: "",
    toAccount: "",
    amount: 0.0,
    method: "",
    sn: "",
    remark: "",
  });
};

/**
 * 删除行（至少保留1行）
 * @param {number} index - 当前行索引
 */
const handleRemoveRow = (index) => {
  if (tableData.value.length === 1) {
    ElMessage.warning("至少保留一条转账记录");
    return;
  }
  tableData.value.splice(index, 1);
};

// ====================== 表单验证 ======================
/**
 * 验证表单完整性
 * - 转出/转入账户必填
 * - 金额≥0.01
 */
function validateForm() {
  for (const row of tableData.value) {
    if (!row.fromAccount) {
      ElMessage.error("请选择转出账户");
      return false;
    }
    if (!row.toAccount) {
      ElMessage.error("请选择转入账户");
      return false;
    }
    if (row.amount < 0.01) {
      ElMessage.error("金额必须大于0.01");
      return false;
    }
  }
  return true;
}

// ====================== 业务操作 ======================
/**
 * 保存数据（模拟，需对接后端）
 */
const handleSave = () => {
  if (!validateForm()) return;
  ElMessage.success("保存成功！");
  // TODO: 调用后端接口保存数据（例：axios.post('/api/transfer', { form, tableData })）
};

/**
 * 保存并重置表单（用于“保存并新增”）
 */
const handleSaveAndNew = () => {
  if (!validateForm()) return;
  ElMessage.success("保存成功，已重置表单！");
  resetForm();
};

/**
 * 审核操作（模拟）
 */
const handleApprove = () => {
  if (!validateForm()) return;
  ElMessage.success("审核通过！");
  // TODO: 调用审核接口
};

/**
 * 查看历史单据（占位）
 */
const handleHistory = () => {
  ElMessage.info("历史单据功能开发中...");
};

/**
 * 查看操作日志（占位）
 */
const handleLog = () => {
  ElMessage.info("操作日志功能开发中...");
};

/**
 * 重置表单（用于“保存并新增”）
 */
function resetForm() {
  form.remark = "";
  tableData.value = [
    {
      fromAccount: "",
      toAccount: "",
      amount: 0.0,
      method: "",
      sn: "",
      remark: "",
    },
  ];
  form.sn = generateSN(); // 重新生成新单据编号
}

// ====================== 生命周期 ======================
onMounted(() => {
  // 确保表格至少有1行数据
  if (tableData.value.length === 0) {
    resetForm();
  }
});

// ====================== 行样式（可选） ======================
/**
 * 偶数行添加浅黄色背景（匹配设计稿）
 * @param {object} param - { row, rowIndex }
 * @returns {string} - CSS类名
 */
function handleRowClassName({ rowIndex }) {
  return rowIndex % 2 === 0 ? "even-row" : "";
}
</script>

<style scoped>
.transfer-container {
  padding: 24px;
  background: #fff;
}

.header-section {
  margin-bottom: 16px;
}

.sn-container {
  line-height: 32px;
  color: #666;
}

.sn-text {
  font-weight: 500;
  color: #333;
}

.remark-section {
  margin: 16px 0;
}

.button-section {
  margin-top: 16px;
}

/* 偶数行背景色（浅黄色） */
.el-table .even-row {
  background-color: #fff9e6;
}

/* 操作图标间距 */
.cell-ops {
  gap: 4px;
}

.add-icon,
.del-icon {
  font-size: 18px;
}
</style>